import { Bar, BarConfig } from '@ant-design/charts';
import { useModel } from '@umijs/max';
import { useEffect, useState } from 'react';

const ChartBar: React.FC = () => {
  const { business_diagnosis } = useModel('Resume.resumeModel');
  const [data, setData] = useState<any>([]);

  const initData = () => {
    let _data: any = [];
    business_diagnosis?.forEach((item: any) => {
      _data.push({
        type: item.key_point,
        value: Number(item.score),
      });
    });
    setData(_data);
  };

  let colorList = [
    '#3584fa',
    '#f49e62',
    '#687dff',
    '#f78482',
    '#4eb7b3',
    '#FE8463',
    '#9BCA63',
  ];

  const config: BarConfig = {
    data,
    width: 300,
    height: 300,
    xField: 'value',
    yField: 'type',
    maxBarWidth: 15,
    barStyle: {
      radius: [10, 10, 0, 0],
      textAlign: 'right',
    },
    label: {
      position: 'right', // 在柱状图的右侧显示标签
      offsetX: -8,
    },
    tooltip: {
      showTitle: false, // 是否显示标题
      showContent: false,
    },
    xAxis: {
      label: null, // 隐藏x轴文字
      grid: null,
      max: 10,
      line: {
        style: {
          stroke: 'transparent', // 隐藏x轴线条
        },
      },
    },
    yAxis: {
      label: {
        formatter: (value: string) => {
          return `${value.substring(0, 4)}\n${value.substring(4, 8)}`;
        },
      }, // 隐藏y轴文字
      grid: null,
      line: {
        style: {
          stroke: 'transparent', // 隐藏y轴线条
        },
      },
    },
    color: () => {
      // 返回随机不重复的颜色
      let index = Math.floor(Math.random() * colorList.length);
      let color = colorList[index];
      colorList.splice(index, 1);
      return color;
    },
    legend: false,
  };

  useEffect(() => {
    initData();
  }, [business_diagnosis]);

  return <Bar {...config} />;
};

export default ChartBar;
